<script setup>
import { ref, reactive, toRaw, computed } from "vue";
import imgURL from "@/assets/login-head.png";
import { userLogin, userHylogin, menuIndex } from "@/api";

// import router from "@/router";
import { useRouter } from "vue-router";
const router = useRouter();
import { useUserStore } from "@/stores/UserStore";
const useuserstore = useUserStore();
// 1管理员登录，2会员登录
const loginType = ref("0");

const formData = reactive({
  username: "",
  password: "",
  type: 1,
});

const formRef = ref();

const routerType = (res) => {
  if (res.code === 500) return;
  useuserstore.dynamicMenu(res.data);
  toRaw(useuserstore.MenuRouer).forEach((item) => {
    // 给指定的地方添加路由
    router.addRoute("main", item);
  });
};
const submitForm = async () => {
  console.log(loginType.value);

  if (loginType.value === "0") {
    const res = await userLogin(formData);
    if (res.code === 200) {
      ElMessage.success(res.msg);
    }
    if (res.code === 500) return;
    Object.assign(useuserstore.AdminUser, res.data);
    useuserstore.ID = true;

    useuserstore.User = "1";
    // 获取动态路由
    // await menuIndex({ type: `${User}` }).then((res) => {

    await menuIndex({ type: "1" }).then((res) => {
      routerType(res);
      router.push("/");
    });
  } else {
    const res = await userHylogin({
      cardno: formData.username,
      pass: formData.password,
      type: 2,
    });
    if (res.code === 200) {
      ElMessage.success(res.msg);
    }
    if (res.code === 500) return;
    Object.assign(useuserstore.VipUser, res.data);
    useuserstore.ID = true;
    useuserstore.User = "2";
    // 获取动态路由
    await menuIndex({ type: "2" }).then((res) => {
      routerType(res);
      router.push("/");
    });
  }
};
</script>

<template>
  <div class="login">
    <el-card style="max-width: 480px">
      <template #header>
        <el-image
          style="width: 100%; height: 160px; background-color: skyblue"
          :src="imgURL"
          fit="scale-down"
      /></template>
      <div class="login-text" @click="loginType = `${Math.abs(loginType - 1)}`">
        {{ loginType !== "0" ? "切换管理员登录" : "切换会员登录" }}
      </div>

      <el-form :model="formData" ref="formRef" label-width="80px">
        <el-form-item label="账号：" prop="username">
          <el-input
            v-model="formData.username"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input
            v-model="formData.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
:deep() {
  .el-card__header {
    padding: 0;
  }
}
.login {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中（可选） */
  height: 300px; /* 必须设置父容器高度 */
  background: #f0f0f0;
  height: 100%;
  .login-text {
    text-align: right;
    padding-bottom: 15px;
    color: blue;
  }
}
</style>
